@extends('admin.main')

@section('content')
    <div class="wrapper wrapper-content">
        <div class="ibox">
            <div class="ibox-title">
                <h5>盒子列表</h5>
            </div>
            <div class="ibox-content">

                <div class="tabs-container">
                    <ul class="nav nav-tabs">
                        <li class="@if($status==-1) active @endif"><a data-toggle="tab" href="javascript:;" class="btn-tab" rel="-1">全部</a></li>
                        <li class="@if($status==1) active @endif"><a data-toggle="tab" href="javascript:;" class="btn-tab" rel="1">待搭配</a></li>
                        <li class="@if($status==2) active @endif"><a data-toggle="tab" href="javascript:;" class="btn-tab"  rel="2">搭配中</a></li>
                        <li class="@if($status==3) active @endif"><a data-toggle="tab" href="javascript:;" class="btn-tab" rel="3">待邮寄</a></li>
                        <li class="@if($status==4) active @endif"><a data-toggle="tab" href="javascript:;" class="btn-tab" rel="4">待收货</a></li>
                        <li class="@if($status==5) active @endif"><a data-toggle="tab" href="javascript:;" class="btn-tab" rel="5">待评论</a></li>
                        <li class="@if($status==6) active @endif"><a data-toggle="tab" href="javascript:;" class="btn-tab" rel="6">已完成</a></li>
                    </ul>
                    <div class="tab-content">
                        <div  class="tab-pane active">
                            <div class="panel-body">
                                <form role="form" class="form-inline">
                                    <div class="form-group">
                                        <input name="userNumber" type="text" placeholder="会员编号" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <input name="username" type="text" placeholder="收货人" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <input type="text" name="mobile" placeholder="手机号" class="form-control">
                                    </div>
                                    <div class="form-group no" style="display:none">
                                        <input type="text" name="no" placeholder="快递单号" class="form-control">
                                    </div>
                                    <div class="form-group time-group" style="display:none">
                                        <div class=" input-group" id="input-daterange">
                                            <input type="text" class="input-sm form-control" name="datetime"
                                                   id="datetime" placeholder="发货时间">
                                        </div>
                                    </div>
                                    <button class="btn btn-primary btn-sm" type="button" id="buttonData">搜索</button>
                                </form>
                                <div class="hr-line-dashed"></div>
                                <table id="tblDataList" class="table table-striped table-bordered">
                                    <thead>
                                    <tr>
                                         <th>盒子ID</th>
                                        <th>盒子编号</th>
                                        <th>发货时间</th>
                                        <th>收货人</th>
                                        <th>收货人联系方式</th>
                                        <th>收货地址</th>
                                        <th>生活场景</th>
                                        <th>盒子类型</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                                <div class="row text-center" id="pagination"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/html" id="tplDataListTr">
        @{{each rows.data as v}}
        <tr data-id="@{{v.id}}" data-wechat="@{{v.wechat_id}}">
            <td>@{{v.id}}</td>
            <td>@{{v.number}}</td>
            <td>@{{v.delivery_at}}</td>
            <td>@{{v.address ? v.address.username :''}}</td>
            <td>@{{v.address ? v.address.phone:''}}</td>
            <td>@{{v.address ? v.address.province:''}}@{{v.address ?v.address.city:''}}@{{v.address ?v.address.area:''}}@{{v.address ?v.address.address:''}}</td>
            <td>@{{v.life}}</td>
            <th>@{{v.type==1?'赠送盒子':'盒子'}}</th>
            <td>@{{v.statusName}}</td>
            <td>
                <div class="btn-group" role="group">
                    <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        操作
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
                        <li><a href="javascript:;" class=" btn-box-history">
                                历史搭配</a></li>
                        <li><a href="javascript:;" class=" btn-user-info">
                                收货人资料</a></li>
                        @{{if v.status==1 || v.status==2 || v.status==3}}
                        <li><a href="javascript:;" class=" btn-box-collocation">搭配服装</a></li>
                        @{{/if}}
                        @{{if v.status==3}}
                        <li><a href="javascript:;" class="m-r-xs js-send"><i class="fa fa-pencil-square fa-lg"></i> 确认发货</a>
                        </li>
                        @{{/if}}
                        @{{if v.status ==4}}
                        <li><a href="javascript:;" class="m-r-xs js-collect-goods" status="5">
                                <i class="fa fa-pencil-square fa-lg"></i> 确认收货</a></li>
                        @{{/if}}
                        @{{if v.status==6}}
                        <li><a href="javascript:;" class="btn-comment">
                                查看评价
                            </a></li>
                        @{{/if}}
                    </ul>
                </div>
            </td>
        </tr>
        @{{/each}}
    </script>

    <script type="text/html" id="tplBoxSend">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form id="formSend" class="form-horizontal" onsubmit="return false">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal" type="button">×</button>
                        <h4 class="modal-title">发货信息</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">快递:</label>
                                <div class="col-sm-9">
                                    <select class="form-control m-b" name="name" required>
                                        <option value="顺丰">顺丰</option>
                                        <option value="韵达">韵达</option>
                                        <option value="优速">优速</option>
                                        <option value="中通">中通</option>
                                        <option value="申通">申通</option>
                                        <option value="圆通">圆通</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">快递单号</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="no" value="" required="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">预计签收时间</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="estimate_at" id="estimate_at" value="" required="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" class="form-control" value="@{{id}}" name="id" required="">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </script>

    <script type="text/html" id="tplBoxCollocation">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form id="formBoxCollocation" class="form-horizontal" onsubmit="return false">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal" type="button">×</button>
                        <h4 class="modal-title">盒子搭配</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-xs-12">
                                <table class="table table-bordered" id="tplBoxCollocationRowlist">
                                    <thead>
                                    <tr>
                                        <th>款号</th>
                                        <th>标题</th>
                                        <th>价格</th>
                                        <th>件数</th>
                                        <th>颜色</th>
                                        <th>尺码</th>
                                        <th>照片</th>
                                        <th width="100">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                            <div class="col-xs-12">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">标题:</label>
                                    <div class="col-sm-9">
                                        <input type="hidden" class="form-control" name="id" required>
                                        <input type="text" class="form-control" name="title" required>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">款号:</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="style_number" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">价格:</label>
                                    <div class="col-sm-9">
                                        <input type="number" class="form-control" name="price" required min="0" onkeyup="clearNoNum(this)">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">件数:</label>
                                    <div class="col-sm-9">
                                        <input type="number" class="form-control" name="p_number" required min="1" onkeyup="this.value=this.value.replace(/[^\d]/g,'') " >
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">颜色:</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="colour" required >

                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">尺码:</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="size" required>
                                    </div>
                                </div>
                                <div class="form-group item-pic">
                                    <label class="col-sm-2 control-label">上传照片：</label>
                                    <div class="col-sm-9">
                                        <img src="/assets/images/upload-img.jpg" width="180px" id="imgList">
                                        <input type="file" style="display: none" id="uploadfile">
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" data-box="@{{box_id}}" id="js-put">提交</button>
                        </div>
                </form>
            </div>
        </div>
    </script>

    <script type="text/html" id="tplBoxCollocationRow">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">×</button>
                    <h4 class="modal-title">历史搭配服装</h4>
                </div>
                <div class="modal-body">

                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>盒子编号</th>
                            <th>款号</th>
                            <th>价格</th>
                            <th>颜色</th>
                            <th>尺码</th>
                            <th>照片</th>
                        </tr>
                        </thead>
                        <tbody>
                        @{{each rows.data as row}}
                        <tr>
                            <td>@{{box.number}}</td>
                            <td>@{{row.style_number}}</td>
                            <td>@{{row.price}}</td>
                            <td>@{{row.colour}}</td>
                            <td>@{{row.size}}</td>
                            <td>
                                <img src="/@{{row.pic}}" width="50px" height="50px">
                            </td>
                        </tr>
                        @{{/each}}
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </script>

    <script type="text/html" id="tplBoxCommentRow">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">×</button>
                    <h4 class="modal-title">评论</h4>
                </div>
                <div class="modal-body">
                    <table class="footable table table-stripped toggle-arrow-tiny">
                        <tbody>
                            <tr>
                                <td>客户服务评价</td>
                                <td>
                                    <% for(var i = 0; i < 5; i++){ %>
                                        @{{if row.evaluate > i}}
                                            <i class="fa fa-star text-warning"></i>
                                        @{{else}}
                                            <i class="fa fa-star"></i>
                                        @{{/if}}
                                    <% } %>
                                </td>
                            </tr>
                            <tr>
                                <td>搭配评分</td>
                                <td>
                                    <% for(var i = 0; i < 5; i++){ %>
                                        @{{if row.score > i}}
                                            <i class="fa fa-star text-warning"></i>
                                        @{{else}}
                                            <i class="fa fa-star"></i>
                                        @{{/if}}
                                    <% } %>
                                </td>
                            </tr>
                            <tr style="background-color:#f9f9f9"  class="text-center"><td colspan="2">服装评分</td></tr>
                            <tr>
                                <td colspan="2">
                                    <div class="step-content body current" id="wizard-p-0" role="tabpanel" aria-labelledby="wizard-h-0" aria-hidden="false">
                                        <div class="text-center m-t-md">
                                            <table class="table table-hover margin bottom">
                                                <tbody>
                                                    @{{each row.clothing as v}}
                                                        <tr>
                                                            <td rowspan="3"><img src="/@{{v.collocation.pic}}" width="80px"></td>
                                                            <td class="text-center">尺码</td>
                                                            <td class="text-center small">
                                                                <button type="button" class="btn btn-w-m @{{if v.size==1}}btn-danger @{{else}} btn-white @{{/if}}" >合适</button>
                                                                <button type="button" class="btn btn-w-m @{{if v.size==2}}btn-danger @{{else}} btn-white @{{/if}}">偏大</button>
                                                                <button type="button" class="btn btn-w-m @{{if v.size==3}}btn-danger @{{else}} btn-white @{{/if}}">偏小</button>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td class="text-center">款式</td>
                                                            <td class="text-center small">
                                                                <button type="button" class="btn btn-w-m @{{if v.style==1}}btn-danger @{{else}} btn-white @{{/if}}" >喜欢</button>
                                                                <button type="button" class="btn btn-w-m @{{if v.style==2}}btn-danger @{{else}} btn-white @{{/if}}">一般</button>
                                                                <button type="button" class="btn btn-w-m @{{if v.style==3}}btn-danger @{{else}} btn-white @{{/if}}">不喜欢</button>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            
                                                            <td class="text-center">颜色</td>
                                                            <td class="text-center small">
                                                                <button type="button" class="btn btn-w-m @{{if v.colour==1}}btn-danger @{{else}} btn-white @{{/if}}" >喜欢</button>
                                                                <button type="button" class="btn btn-w-m @{{if v.colour==2}}btn-danger @{{else}} btn-white @{{/if}}">一般</button>
                                                                <button type="button" class="btn btn-w-m @{{if v.colour==3}}btn-danger @{{else}} btn-white @{{/if}}">不喜欢</button>
                                                            </td>
                                                        </tr>
                                                    @{{/each}}
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td width="150px">文字评价：</td>
                                <td>@{{row.content}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </script>

    <script type="text/html" id="tplCollocationPageRows">
        @{{each rows as val}}
            <tr data-id="@{{val.id}}" data-box_id="@{{val.box_id}}">
                <td>@{{val.style_number}}</td>
                <td>@{{val.title}}</td>
                <td>@{{val.price}}</td>
                <td>@{{val.p_number}}</td>
                <td rel="@{{val.colour_id}}">@{{val.colour}}</td>
                <td rel="@{{val.size}}">@{{val.size}}</td>
                <td>
                   <img src='/@{{val.pic}}' url="@{{val.pic}}" width="50px">
                </td>
                <td>
                    <button type="button"
                            class="btn btn-xs btn-danger m-r-xs btn-collocation-del">移除
                    </button>
                    <button type="button" class="btn btn-xs btn-success btn-collocation-update">
                        修改
                    </button>
                </td>
            </tr>
        @{{/each}}
    </script>

@include('admin.user.templateUserinfo')
@endsection

@section('pageheader')
@endsection
@section('pagescript')
    <script src="/assets/layDate/laydate.js"></script>
    <script>
        $("#side-menu li[rel='box']").addClass("active").find("ul").addClass("in").find("li[rel='1']").addClass("active");

        var type = '{{$type}}',status = '{{$status}}';
        var filter = {page: 1, status: status};
        $(function () {
            renderList();
            laydate.render({
              elem: '#datetime'
            });

            $('#tblDataList').on('click', '.btn-user-info', function () {
                var id = $(this).parents('tr').eq(0).attr('data-id');
                $.get('/admin/box/' + id, function (data) {
                    console.log(data);
                    $("#modalDialog").html(template("tplUserInfo", data)).modal("show");
                }).fail(failure);
            });

            $('.btn-tab').on('click', function () {
                $(this).parents('li').eq(0).addClass('active').siblings().removeClass('active');
                filter.status = $(this).attr('rel');
                filter.page = 1;
                if (filter.status > 3) {
                    $('.time-group').show();
                    $('.no').show();
                } else {
                    $('.time-group').hide();
                    $('.no').hide();
                }
                renderList();
            });


            $('#tblDataList').on('click', '.js-send', function () {
                var id = $(this).parents('tr').eq(0).attr('data-id');
                $("#modalDialog").html(template("tplBoxSend", {'id': id})).modal("show");
                laydate.render({
                  elem: '#estimate_at'
                  ,format: 'yyyy-MM-dd'
                });
            });

            $("#modalDialog").on('submit', '#formSend', function (e) {
                $.post('/admin/box/send', $('#formSend').serialize(), function (data) {
                    $("#modalDialog").html('').modal("hide");
                    renderList();
                    layer.msg('发货成功');
                }).fail(failure);
            });


            $('#buttonData').on('click', function () {
                filter.userNumber = $("input[name='userNumber']").val();
                filter.username = $("input[name='username']").val();
                filter.mobile = $("input[name='mobile']").val();
                filter.datetime = $("input[name='datetime']").val();
                filter.no = $("input[name='no']").val();
                filter.page = 1;
                renderList();
            });

            //分页
            $("#pagination").on("click", "a", function () {
                filter.page = $(this).attr("rel");
                renderList();
            });

            //评论
            $('#tblDataList').on('click', ".btn-comment", function () {
                var id = $(this).parents('tr').eq(0).attr('data-id');
                $.get('/admin/box/' + id + '/comment', function (data) {
                    $("#modalDialog").html(template("tplBoxCommentRow", data)).modal("show");
                }).fail(failure);
            })


            //搭配历史表
            $("#tblDataList").on('click', '.btn-box-history', function () {
                var id = $(this).parents('tr').eq(0).attr('data-id');
                $.get('/admin/box/collocation-page-row/' + id, {'type': 'history'}, function (data) {
                    $("#modalDialog").html(template("tplBoxCollocationRow", data)).modal("show");
                }).fail(failure);
            });

            //服装搭配弹窗
            $("#tblDataList").on('click', '.btn-box-collocation', function () {
                var id = $(this).parents('tr').eq(0).attr('data-id');
                $.get('/admin/box/collocation-page-row/' + id, $('#formSend').serialize(), function (data) {

                    $("#modalDialog").html(template("tplBoxCollocation",{'box_id':id})).modal("show");
                    renderCollocationList(id);

                    $('.item-pic img').click(function () {
                        $("input[type='file']").click();
                    });

                    $("input[type='file']").change(function () {
                        let files=$(this)[0].files[0];//获取files对象

                        var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式
                        if (!rFilter.test(files.type)) {
                            msg('格式错误');
                            return;
                        }
                        layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
                        var formData = new FormData();
                        formData.append("file",files);
                        $.ajax({
                            url: "/admin/upload-img",
                            type: "post",
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function (data) {
                                $('.item-pic img').attr('src','/'+data).attr('url',data);
                                layer.closeAll();
                            },
                            error: function (data) {
                                layer.closeAll();
                                var str = typeof(data) == 'string' ? data : data.responseJSON;
                                layer.msg(str, {icon: 0});
                                return false;
                            }
                        });
                    });

                }).fail(failure);
            });

            //编辑搭配按钮
            $("#modalDialog").on('click', ".btn-collocation-update", function () {
                var that = $(this).parents('tr').eq(0);
                $("input[name='id']").val(that.attr('data-id'));
                $("input[name='title']").val(that.children('td').eq(0).text());
                $("input[name='style_number']").val(that.children('td').eq(1).text());
                $("input[name='price']").val(that.children('td').eq(2).text());
                $("input[name='p_number']").val(that.children('td').eq(3).text());
                $("input[name='colour']").val(that.children('td').eq(4).text());
                $("input[name='size']").val(that.children('td').eq(5).text());
                var url = that.children('td').eq(6).find('img').attr('url');
                $("#imgList").attr('url',url).attr('src','/'+url);
                that.remove();
            })

            //提交搭配
            $("#modalDialog").on('click', '#js-put', function (e) {
                var param = new Array();
                var box_id = $(this).attr('data-box');
                formData = $('#formBoxCollocation').serializeArray();
                formData.push({"name":"box_id","value":box_id});

                var pic = $("#imgList").attr("url");
                formData.push({"name":"pic","value":pic});

                $.ajax({
                    url: "/admin/box/collocation",
                    dataType: "json",
                    type: "post",
                    data: formData,
                    success: function (data) {
                        layer.msg('提交成功');
                        renderCollocationList(box_id);
                        $("#formBoxCollocation")[0].reset();
                        $("input[name='id']").attr('value','');
                        $(".item-pic img").attr('src','/assets/images/upload-img.jpg').removeAttr('url');
                    },
                    error: function (data) {
                        var str = typeof(data) == 'string' ? data : data.responseJSON;
                        layer.msg(str, {icon: 0});
                        return false;
                    }
                });
            });

            // 收货
            $('#tblDataList').on('click', '.js-collect-goods', function () {
                var id = $(this).parents('tr').eq(0).attr('data-id');
                var param = {'status': 5};
                layer.confirm('确定收货', {
                    btn: ['确定', '取消']
                }, function () {
                    $.post('/admin/box/change', {"param": param, 'id': id}, function (data) {
                        layer.msg('操作完成');
                        renderList();
                    }).fail(failure);
                }, function () {
                    layer.closeAll();
                })
            })

            //删除搭配
            $("#modalDialog").on('click', '.btn-collocation-del', function () {
                var that = $(this).parents('tr').eq(0);
                var id = that.attr('data-id');
                var box_id = that.attr('data-box_id');
                layer.confirm('确定删除', {
                    btn: ['确定', '取消']
                }, function () {
                    $.post('/admin/box/collocation/del', {'id': id,'box_id':box_id}, function (data) {
                        layer.msg('操作完成');
                        that.remove();
                    }).fail(failure);
                }, function () {
                    layer.closeAll();
                })
            });
        })

        //盒子列表
        var renderList = function () {
            $("#tblDataList tbody").html('<tr><td colspan="10">'+load+'</td></tr>');
            $.get('/admin/box', filter, function (data) {
                var pagination = data.rows;
                $("#tblDataList tbody").html(template("tplDataListTr", data));
                $("#pagination").html(page(pagination.last_page, pagination.total, pagination.current_page));
            }).fail(failure);
        };

        //搭配列表
        var renderCollocationList = function (id) {
            $.get('/admin/box/collocation-page-row/'+id, function (data) {
                console.log(data);
                $("#modalDialog #tplBoxCollocationRowlist tbody").html(template("tplCollocationPageRows", data));
            }).fail(failure);
        };




    </script>
@endsection
